<template>
  <div
    v-if="currentPosition.x"
    class="overlay-detail"
    :style="{
      left: `${currentPosition.x}px`,
      top: `${currentPosition.y}px`
    }"
  >
    <div class="detail-item-title">
      <div class="name">{{ currentData.name }}</div>
      <div class="time">
        {{ dayjs(currentData.time).format('YYYY-MM-DD HH:mm:00') }}
      </div>
    </div>
    <div class="detail-item-wrap">
      <div class="detail-item">
        <div class="circle"></div>
        <p>路况</p>
        <div
          class="circle2"
          :style="{
            backgroundColor: damageColor[currentData.lineDangerFlag]
          }"
        ></div>
        <p>{{ currentData.lineDanger }}</p>
      </div>
      <div class="detail-item2">
        <div class="circle"></div>
        <p>
          提示
          <span style="margin-left: 10px">{{ currentData.lineStatus }}</span>
        </p>
      </div>
    </div>
    <div class="detail-item-wrap">
      <div class="detail-item">
        <div class="icon0"></div>
        <p>降水情况</p>
        <p style="margin-left: 10px">
          {{ currentData.rain }}
        </p>
      </div>
      <div class="detail-item">
        <div class="icon1"></div>
        <p>
          视觉能见度情况
          <span style="margin-left: 10px">{{ currentData.visibility }}</span>
        </p>
      </div>
      <div class="detail-item">
        <div class="icon2"></div>
        <p>
          风力情况
          <span style="margin-left: 10px">{{ currentData.wind }}</span>
        </p>
      </div>
    </div>
    <div class="detail-item-wrap">
      <div class="detail-item">
        <div class="icon0"></div>
        <p>降水量</p>
        <p style="margin-left: 10px">{{ currentData.rainValue + 'mm' }}</p>
      </div>
      <div class="detail-item">
        <div class="icon1"></div>
        <p>能见度</p>
        <p style="margin-left: 10px">{{ currentData.visibilityValue + 'm' }}</p>
      </div>
      <div class="detail-item">
        <div class="icon2"></div>
        <p>风级</p>
        <p style="margin-left: 10px">{{ currentData.windSpeed + 'm/s' }}</p>
        <p>风向</p>
        <p style="margin-left: 10px">{{ currentData.windDirection }}</p>
      </div>
    </div>
    <span class="arrow" />
  </div>
</template>

<script setup lang="ts">
import * as L from 'leaflet'
import dayjs from 'dayjs'
import apiList from '@/pages/traffic/api/api'
import { useTrafficStore } from '@/pages/traffic/store/store'

const trafficStore = useTrafficStore()

const baseMap = inject('baseMap')

const currentTab = computed(() => trafficStore.currentTab)
const currentTabData = computed(() => trafficStore.currentTabData)
const timeIndex = computed(() => trafficStore.timeIndex)
const damageColor = computed(() => trafficStore.damageColor)

const handleGpsData = data => {
  const dataList = data.split(';').map(i => ({
    lng: Number(i.split(',')[0]),
    lat: Number(i.split(',')[1])
  }))
  return [dataList[0], dataList[dataList.length - 1]]
}

const lineList = ref([])
const handleInitData = async () => {
  lineList.value = []
  trafficStore.lineList = []
  trafficStore.mapLoading = true
  const res = await apiList.getRoadLineRisk()
  trafficStore.mapLoading = false
  res.data.forEach(item => {
    item.list.forEach(listItem => {
      listItem.name = item.name
      listItem.gpsList = [
        ...listItem.gps.split(';').map(i =>
          i
            .split(',')
            .map(j => Number(j))
            .reverse()
        )
      ]
      listItem.gpsPoint = handleGpsData(listItem.gps)
    })
    lineList.value.push(item)
  })
  trafficStore.lineList = lineList.value
  handleInitMap()
}

let layer
const handleInitMap = () => {
  if (layer) {
    toRaw(baseMap.value).removeLayer(layer)
  }
  layer = L.layerGroup({
    zIndex: 1000
  }).addTo(toRaw(baseMap.value))
  if (lineList.value.length > 0) {
    lineList.value.forEach(item => {
      item.list.forEach(listItem => {
        handleInitMapPoint(listItem, item.name === '神朔铁路')
        handleInitMapLine(listItem, item.name === '神朔铁路')
      })
    })
  }
}

// 处理点位展示
const handleInitMapPoint = (listData, isRailway) => {
  listData.gpsPoint.forEach(item => {
    const marker = L.marker(item, {
      icon: L.divIcon({
        iconAnchor: [8, 8],
        html: `<div class="${
          isRailway ? 'railway-point' : 'traffic-point'
        }"></div>`
      })
    })
    layer.addLayer(marker)
  })
}

// 当前触摸的点位
const currentPosition = ref({
  x: 0,
  y: 0
})
const currentData = ref({})

// 处理点位展示
const handleInitMapLine = (listData, isRailway) => {
  trafficStore.timeList = listData.list.map(i => i.time)
  const polyline = L.polyline(listData.gpsList, {
    name: listData.name,
    list: listData.list,
    weight: 6,
    color: isRailway
      ? 'rgb(20,172,228)'
      : currentTabData.value.color[
          listData.list[timeIndex.value][`${currentTabData.value.flag}Flag`]
        ]
  })
  layer.addLayer(polyline)
  polyline.on('mouseover', e => {
    const currentItem = e.target.options
    currentData.value = {
      name: currentItem.name,
      ...currentItem.list[timeIndex.value]
    }
    currentPosition.value = {
      x: e.containerPoint.x - 384,
      y: e.containerPoint.y - 40
    }
  })
  polyline.on('mouseout', e => {
    currentData.value = {}
    currentPosition.value = {
      x: 0,
      y: 0
    }
  })
}

watch(
  () => trafficStore.currentTabData,
  () => {
    trafficStore.timeIndex = 0
    handleInitMap()
  }
)

watch(
  () => trafficStore.timeIndex,
  () => {
    handleInitMap()
  }
)

onMounted(() => {
  handleInitData()
})

onUnmounted(() => {
  toRaw(baseMap.value).removeLayer(layer)
})
</script>

<style lang="scss">
.traffic-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00ff00;
  transform: translate(4px, 4px);
}

.railway-point {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: url('@/pages/traffic/images/railway.png') no-repeat;
  background-size: 100%;
  transform: translate(-3px, -3px);
}

.overlay-detail {
  width: 600px;
  // height: 283px;
  border-radius: 4px 4px 4px 4px;
  padding: 15px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1200;
  transform: translate(-50%, -104%);
  background-image: url(./details.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .detail-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    .name {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    .time {
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }
  }
  .detail-item-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    // flex-wrap: wrap;
    .detail-item,
    .detail-item2 {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      height: 40px;
      margin: 10px;
      width: 180px;
      background-image: url(./text_background.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      .circle {
        width: 8px;
        height: 8px;
        background: #a8eaff;
        box-shadow: 0px 0px 6px 1px rgba(0, 193, 255, 0.2);
        border-radius: 3px 3px 3px 3px;
        margin: 2px 5px 0 10px;
      }
      .circle2 {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin: 2px 5px 0 10px;
        background-color: #fff;
      }
      .icon0 {
        width: 13px;
        height: 10px;
        background: url(../../../images/icon0.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 10px;
      }
      .icon1 {
        width: 13px;
        height: 10px;
        background: url(../../../images/icon2.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 10px;
      }
      .icon2 {
        width: 13px;
        height: 10px;
        background: url(../../../images/icon4.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 10px;
      }
      p {
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        margin-right: 2px;
      }
    }
    .detail-item2 {
      width: 350px;
    }
  }

  .arrow {
    position: absolute;
    bottom: -50px;
    right: -80px;
    width: 84px;
    height: 100px;
    z-index: -1;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-50%);
      width: 50%;
      height: 2px;
      background-color: #06feff;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%) rotate(65deg);
      width: 110px;
      height: 2px;
      background-color: #06feff;
    }
  }
}
</style>
